<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表格元素</title>
	</head>
	<body>
		<!-- 表格：布局{栅格布局}
		 层级元素堆叠：
		 定义表格元素：table表格外边框+tr行元素+td单元格元素
		 使用表格元素：
		 定义4行4列表格：table>tr*4>td*4{快捷键}
		 table表格外边框元素：属性与属性值{表格效果}
		 border边框属性   属性值：自定
		 width与height宽高属性  属性之后：自定数值px
		 cellspacing表格外边距属性 属性值：自定数值px
		 理解：表格外边框与单元格距离
		 cellpadding表格内边距属性 属性值：自定数值px
		 理解：内容与每个单元格的距离
		 tr行元素：bgcolor背景颜色属性
		 td单元格元素：colspan跨列属性  属性值：数值{整数}
		              口诀：跨2行，删本行的单元格（谁被挤出去就删谁）
		              rowspan跨行属性  属性值：数值{整数}
					  口诀：跨2行，删下一行的单元格（谁被挤出去就删谁）
		 
		 -->
		 <h1>复杂表格</h1>
		 ：<table  width="260px" height="260px "cellspacing="0" cellpadding="50">
		 	<tr bgcolor="red">
		 		<td colspan="3">1</td>
		 	
		 		
		 		<td rowspan="2">1</td>
		 	</tr >
		 	<tr bgcolor="yellow">
		 		<td>2</td>
		 		<td>2</td>
		 		<td>2</td>
		 		<td>2</td>
		 	</tr >
		 	<tr bgcolor="blue">
		 		<td>3</td>
		 		<td>3</td>
		 		<td>3</td>
		 		<td>3</td>
		 	</tr >
		 	<tr bgcolor="pink">
		 		<td>4</td>
		 		<td>4</td>
		 		<td>4</td>
		 		<td>4</td>
		 	</tr>
		 </table>
		 <h1>复杂表格1</h1>
		 <table border="1" width="260px" height="260px ">
		 	<tr bgcolor="red">
		 		<td colspan="2">1</td>
		 		<td rowspan="2">1</td>
		 		
		 	</tr>
		 	<tr bgcolor="yellow">
		 		<td rowspan="2">2</td>
		 		<td>2</td>
		 		
		 	</tr>
		 	<tr "blue">
		 		
		 		<td colspan="2">3</td>
		 		
		 	</tr>
		 </table>
		 <h1>复杂表格2</h1>
		 <table    width="300px" height="300px ">
		 	<tr>
		 		<td colspan="10">--->>求职申请<<---</td>
		 		
		 	</tr>
		 	<tr>
		 		<td colspan="10"><form >用户名：<input type="text" /></form></td>
				
		 		
		 	</tr>
		 	<tr>
		 		<td colspan="10"><form >密码：<input type="text" /></form></td>
		 		
		 	</tr>
		 	<tr>
		 		<td colspan="10"><form ><input type="radio" "/>男 <input type="radio" /> 女  <input type="radio" /> 不透露</form></td>
		 		
		 	</tr>
		 	<tr>
		 		<td colspan="10"><form > 头像：   <input type="file" />  </form></td>
		 		
		 	</tr>
		 	<tr>
		 		<td colspan="10"><form ><input type="button" value="提交" /><input type="button" value="清除" /></form></td>
		 		
		 	</tr>
		 	<tr>
		 		<td colspan="10"><form><input type="checkbox" />不要公开我的信息</form></td>
		 		
		 	</tr>
			
		 </table>
		 
	</body>
</html>